<template>
    <Layer :layer="layer" @confirm="submit" ref="layerDom">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right: 30px">
            <el-form-item label="名称：" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="数字：" prop="number">
                <el-input v-model="form.number" oninput="value=value.replace(/[^\d]/g,'')" placeholder="只能输入正整数"></el-input>
            </el-form-item>
            <el-form-item label="选择器：" prop="select">
                <el-select v-model="form.choose" placeholder="请选择" clearable>
                    <el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单选框：" prop="radio">
                <el-radio-group v-model="form.radio">
                    <el-radio v-for="item in radioData" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <uploadFile v-model="form.files" />
        </el-form>
    </Layer>
</template>

<script setup>
import { defineProps, ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import Layer from '@/components/layer/index.vue'
import { selectData as selectDataEnum, radioData as radioDataEnum } from '@/enums'
import { add, update } from '@/api/customer'
import uploadFile from '@/components/common/uploadFile.vue'

const props = defineProps({
    layer: {
        type: Object,
        default: () => ({
            show: false,
            title: '',
            showButton: true
        })
    }
})
const emit = defineEmits(['getTableData'])

const ruleForm = ref(null)
const layerDom = ref(null)
const selectData = ref(selectDataEnum)
const radioData = ref(radioDataEnum)
let form = ref({
    name: '',
    choose: '',
    radio: '',
    number: '',
    files: []
})
const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    number: [{ required: true, message: '请输入数字', trigger: 'blur' }],
    choose: [{ required: true, message: '请选择', trigger: 'blur' }],
    radio: [{ required: true, message: '请选择', trigger: 'blur' }]
}
init()
function init() {
    if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row))
    }
}

async function submit() {
    if (ruleForm) {
        ruleForm.value.validate((valid) => {
            if (valid) {
                let params = form.value
                if (props.layer.row) {
                    updateForm(params)
                } else {
                    addForm(params)
                }
            } else {
                return false
            }
        })
    }
}
// 新增提交事件
function addForm(params) {
    add(params).then((res) => {
        console.log('新增提交事件', res)
        ElMessage({ type: 'success', message: '新增成功' })
        emit('getTableData', true)
        layerDom.value && layerDom.value.close()
    })
}
// 编辑提交事件
function updateForm(params) {
    update(params).then((res) => {
        ElMessage({ type: 'success', message: '编辑成功' })
        emit('getTableData', false)
        layerDom.value && layerDom.value.close()
    })
}
</script>

<style lang="scss" scoped></style>
